﻿@model Zatify.WebUI.Models.BusinessProfileCategoriesViewModel
@{
    ViewBag.Title = "Profile - Categories";
    ViewBag.ContentTitle = "Profile - Categories";
    Layout = "~/Views/Shared/_ContentLayout.cshtml";
}
@section Styles
{
    <style type="text/css">
        .inner_container
        {
            float: none;
        }
        .imgBtnAddCategory
        {
            right: 0px;
            left: 285px;
        }
    </style>
}
@section Scripts
{
    <script type="text/javascript">

        var catsIds = [];

        $(document).ready(function () {

            if ($("#SelectegCategoriesIds").val())
                catsIds = $("#SelectegCategoriesIds").val().split(",");
        });

        function addCategory(e, id) {

            var hiddenCategoriesIds = $("#SelectegCategoriesIds");

            if ($(e).attr("checked")) {

                catsIds.push(id);

                if (catsIds.length == 1) {
                    hiddenCategoriesIds.val(id);
                } else {
                    hiddenCategoriesIds.val(catsIds.join(","));
                }
            }
            else {

                catsIds = jQuery.grep(catsIds, function (value) {
                    return value != id;
                });

                hiddenCategoriesIds.val(catsIds.join(","));
            }
        }

        var newCategoriesAdded = 0;

        function addNewCategory() {

            if ($.trim($("#inputNewCategoryName").val()) == "") {

                alert("You must enter name of new category");
            }
            else {

                newCategoriesAdded++;

                $("#divNewCategoryName" + newCategoriesAdded).show();
                $("#divNewCategoryName" + newCategoriesAdded).find("#spanNewCategoryName" + newCategoriesAdded).text($("#inputNewCategoryName").val());

                $("#NewCategoryName" + newCategoriesAdded).val($("#inputNewCategoryName").val());

                $("#inputNewCategoryName").val("")

                if (newCategoriesAdded == 3)
                    $("#newAddCategoriesBlock").hide();
            }
        }

        function addSingleCategory() {

            $.each($("input[type=radio]"), function (index, item) {

                addCategory(item, $(item).attr("id"));
            });
        }

    </script>
}
<div class="business_interface_area">
    @using (Html.BeginForm())
    {
        <div class="business_profile_categories">
            @Html.Hidden("SelectegCategoriesIds")
            @Html.Hidden("NewCategoryName1")
            @Html.Hidden("NewCategoryName2")
            @Html.Hidden("NewCategoryName3")
            @if (Model.CurrentCategory != null)
            {
                <div style="margin-top: 10px;" class="zatify_panel_btn">
                    <a href="@Url.Action("Categories", "BusinessProfile", new { categoryId = "" })">
                        <input type="button" value="All Categories" class="btn apps_btn apps_gray_btn" name="" />
                    </a>
                    @Html.CategoryBreadCrumbs(Model.CurrentCategory, x => Url.Action("Categories", "BusinessProfile", new { categoryId = x }))
                </div>
            }
            <div id="businessCategories" class="categories_items">
                @for (int i = 0; i < Model.Categories.Count; i++)
                {
                    <div class="categories_line business_reg_step3_line">
                        <label>
                            @if (Model.Categories[i].ChildCategories.Count() > 0)
                            {
                                <a href="@Url.Action("Categories", "BusinessProfile", new { categoryId = Model.Categories[i].CategoryId })">@Model.Categories[i].CategoryName</a>
                            }
                            else
                            {
                                @Model.Categories[i].CategoryName
                            }
                            @if (!Model.Categories[i].IsSingleSelection)
                            {
                                if (Model.Categories[i].IsSelectable())
                                {
                                <input class="categories_checkbox" onchange="addCategory(this, @Model.Categories[i].CategoryId)" type="checkbox" 
                               @(Model.SelectedCategories.Any(c => c.CategoryId == Model.Categories[i].CategoryId) ? "checked='checked' disabled='disabled'" : "")/>
                                }
                            }
                            else
                            {
                                <input id="@(Model.Categories[i].CategoryId)" class="categories_checkbox" type="radio" name="singleCategory" onclick="addSingleCategory()" 
                             @(Model.SelectedCategories.Any(c => c.CategoryId == Model.Categories[i].CategoryId) ? "checked='checked'" : "") />
                            }
                        </label>
                    </div>
                }
                <div id="divNewCategoryName1" class="categories_line business_reg_step3_line" style="display: none;">
                    <label>
                        <span id="spanNewCategoryName1"></span>
                        @Html.CheckBox("NewCategoryName1IsChecked", false, new { @class = "categories_checkbox" })
                    </label>
                </div>
                <div id="divNewCategoryName2" class="categories_line business_reg_step3_line" style="display: none;">
                    <label>
                        <span id="spanNewCategoryName2"></span>
                        @Html.CheckBox("NewCategoryName2IsChecked", false, new { @class = "categories_checkbox" })
                    </label>
                </div>
                <div id="divNewCategoryName3" class="categories_line business_reg_step3_line" style="display: none;">
                    <label>
                        <span id="spanNewCategoryName3"></span>
                        @Html.CheckBox("NewCategoryName3IsChecked", false, new { @class = "categories_checkbox" })
                    </label>
                </div>
            </div>
            @if (Model.CurrentCategory == null)
            {
                <div id="newAddCategoriesBlock" class="categories_line business_reg_step3_line">
                    <label>
                        Other :
                        <input type="text" id="inputNewCategoryName" class="calegory_add_inputbox" placeholder="Request a new category" />
                        <a onclick="addNewCategory()">
                            <img src="@Url.Content("~/Content/zatify/images/add_btn_72.png")" class="imgBtnAddCategory" alt="Add Category" style="cursor:pointer; position: absolute; right: 150px; top: 10px;" />
                        </a>
                    </label>
                </div>
            }
            <input type="submit" value="Save" class="blue_btn" style="margin-left: 0px;" />
        </div>
    }
    <div class="clearfix">
    </div>
</div>
